<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js库/mock.js"></script>
    <script src="../../js库/vue.js"></script>
    <title>css字体属性</title>
    <style>
        /* css字体属性
            定义字体系列 大小 粗细 文字样式

            字体系列  font-family  
                          font-family: "宋体";
                          多个字体, 前面的不兼容 会使用后面的
            字体大小  font-size: 20px;  20像素
                        谷歌浏览器默认16px
                    标题标签比较特殊 他有自己的文字大小
            字体粗细 font-weight  number常用 默认400 经常给标题标签改字体粗细
                        normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 
                字体粗细和字体大小是不一样的 
            文字样式 斜体
                     font-style: 

            字体复合属性 属性全部写在一起
                    font:  italic 700 30px "微软雅黑"
                      font-style  font-weight  font-size/line-height  font-family
                      有些属性可省略 但必须保留font-size和font-family
    */              
        .type {
            font-family: "Microsoft Yahei","宋体";
        }
           /* 一般 */
        body {
         
            font-family: "Microsoft Yahei";
            font-size: 16px;
        }
        .size {
            font-size: 20px;
        }
        .small{
            font-weight: 400;
        }
        h1 {
            font-weight: 400;
        }
        .sty {
            font-style: italic;
        }
        .all {
            font:  30px/20px "微软雅黑"
        }
    </style>
</head>

<body>
    <div id="root">
        <h1>标题标签</h1>
        <p class="type">字体系列</p>
        <p class="size">字体大小</p>
        <p class="small">字体粗细</p>
        <p class="sty">文字样式</p>
        <p class="all">字体复合属性</p>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
            }
        },
    })
</script>

</html>